<template>
  <div id="shop">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <router-link to="/shop/goods">商品</router-link>
      <router-link to="/shop/ratings">评论</router-link>
      <router-link to="/shop/seller">商家</router-link>
    </div>
    <!-- 路由 -->
    <div class="router">
      <!-- <transition name="slide-fade"> -->
      <!-- 为了防止切换页面重载购物车数据信息 keepalive 保留了购物车状态 -->
      <!--直接从路由上无法直接传递给子组件数据，必须在路由视图这里绑定数据传递接口-->
      <keep-alive>
        <router-view :seller="seller"></router-view>
      </keep-alive>
      <!-- </transition> -->
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable  */
import header from 'components/header/header.vue'

export default {
  data () {
    return {
      seller: {}
    }
  },
  components: {
    'v-header': header
  },
  created () {
    this.$http.get('./static/data.json').then(res => {
      this.seller = res.body.seller
      console.log(res.body.seller)
    })
  }
}
</script>

<style>
  #shop{position: absolute; width: 100%; height: 100%; top: 0; background: #fff; z-index: 9999;}
  .tab{height: 40px;line-height: 40px; display: flex; border-bottom: #f1f1f1 1px solid; position: relative; z-index: 1; }
  .tab a{flex: 1; text-align: center; font-size: 12px; position: relative;color: #3c3113;}
  /*.tab a.router-link-active{color: #fe6732;}*/
  .tab a.router-link-active:after{ width: 40%; height: 4px; content: ""; position: absolute; background: #ffd161; bottom: 0;left: 30%; border-radius: 2px;}
  .slide-fade-enter-active {transition: all .8s; opacity: 1}
  .slide-fade-leave-active {transition: all .8s;transform: translateX(-100%);}
  .slide-fade-enter{transform: translateX(100%);}
</style>
